<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器及优先级</title>
</head>
<body>
    <!-- 
        选择器（11种）：
            通配符选择器          *
            id选择器              #
            类选择器              .
            标签选择器            a span  div
            后代选择器            div p
            子选择器              div>p   ul>li
            兄弟选择器            A~B
            相邻兄弟选择器        A+B
            属性选择器            a[title='222']
            伪类选择器            a:hover
            伪元素选择器          ::before
     -->

     <!-- 
         优先级：（递增）
            1. 类型选择器（标签选择器）
            2. 类选择器
            3. ID选择器
            4. 嵌套组合选择器 多种选择器嵌套组合的优先级 高于 单一的样式选择器
            5. 内联样式
            6. !important


            tip: 
                a. 可比条件下，后面的优先级高于前面的
                b. 可比条件下，后面载入的优先级更高
                c. 可比条件下，@import引用的样式，权重小于link引入的样式
      -->
</body>
</html>